<html>

<head>
    <title></title>
    <style>
        html {
            color: #111;
            background: #fff
        }

        body,
        div,
        dl,
        dt,
        dd,
        ul,
        li,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        pre,
        code,
        form,
        fieldset,
        legend,
        input,
        button,
        textarea,
        blockquote,
        p {
            margin: 0;
            padding: 0
        }

        table {
            border-collapse: collapse;
            border-spacing: 0
        }

        fieldset,
        img {
            border: 0
        }

        address,
        caption,
        cite,
        code,
        dfn,
        em,
        i,
        strong,
        th,
        var,
        optgroup {
            font-style: normal;
            font-weight: normal
        }

        ul,
        ol {
            list-style: none
        }

        caption,
        th {
            text-align: left
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-size: 100%;
            font-weight: normal
        }

        q:before,
        q:after {
            content: ""
        }

        abbr,
        acronym {
            border: 0;
            font-variant: normal
        }

        sup {
            vertical-align: baseline
        }

        sub {
            vertical-align: baseline
        }

        legend {
            color: #000
        }

        input,
        button,
        textarea,
        select,
        optgroup,
        option {
            font-family: inherit;
            font-size: inherit;
            font-style: inherit;
            font-weight: inherit
        }

        input,
        button,
        textarea,
        select {
            *font-size: 100%
        }

        pre {
            white-space: pre-wrap;
            word-wrap: break-word;
        }

        a {
            cursor: pointer;
            outline: none;
        }

        a:link {
            color: #111;
            text-decoration: none;
        }

        a:visited {
            color: #111;
            text-decoration: none;
        }

        a:hover {
            color: #fff;
            text-decoration: none;
            background: #111;
        }

        a:active {
            color: #fff;
            text-decoration: none;
            background: #f93
        }

        a img {
            border-width: 0;
            vertical-align: middle
        }

        body,
        td,
        th {
            font: 12px Helvetica, Arial, sans-serif;
            line-height: 1.62
        }

        table {
            border-collapse: collapse;
            border: none;
            padding: 0;
            margin: 0
        }

        wbr:after {
            content: "\00200B"
        }

        textarea {
            resize: none
        }

        input[type=text]:focus,
        input[type=password]:focus,
        input[type=tel]:focus,
        textarea:focus {
            outline: none
        }

        body {
            -webkit-text-size-adjust: none;
            -webkit-touch-callout: none;
            -webkit-tap-highlight-color: transparent
        }

        .bn-cta input {
            display: inline-block;
            padding: 4px 20px;
            border: 1px solid #528641;
            background: #3fa156;
            color: #fff;
            font-size: 14px;
            letter-spacing: 2px;
            *position: relative;
            *display: inline;
            zoom: 1;
            *padding: 6px 20px 4px;
            *line-height: 1.2;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px
        }

        .bn-cta input {
            padding: 5px 18px;
            *padding: 4px 10px 2px;
            *vertical-align: middle
        }

        .bn-cta input:hover {
            background-color: #4fca6c;
            border-color: #6aad54
        }

        .bn-cta input:active {
            background-color: #3fa156;
            border-color: #528641
        }

        ul,
        ol {
            margin: 0;
            padding: 0
        }

        .aside h2 {
            font-size: 15px;
            color: #072;
            margin: 0 0 12px 0;
            line-height: 150%
        }

        .sidenav li {
            margin-bottom: 1em
        }

        h1 {
            display: block;
            margin: 0;
            padding: 0 0 15px 0;
            font-size: 25px;
            font-weight: bold;
            color: #494949;
            line-height: 1.1
        }

        p {
            margin: 1em 0
        }

        .site-nav-logo a:hover {
            background: none
        }

        body {
            filter: alpha(opacity=99);
            -moz-opacity: 0.99;
            -khtml-opacity: 0.99;
            opacity: 0.99;
            color: #111;
            font-size: 13px
        }

        h2 {
            text-align: center;
            font-size: 25px;
            font-weight: normal;
            margin-bottom: 30px;
            line-height: 1em;
            color: #555;
        }

        form {
            width: 358px;
            padding: 60px 60px 50px 60px
        }

        a:link,
        a:active,
        a:visited {
            color: #fff;
            background: inherit
        }

        a:hover {
            color: #fff;
            background: #555;
        }

        .field {
            height: 40px;
            margin-top: 30px;
            overflow: hidden
        }

        .field input[type=text],
        .field input[type=password] {
            border: 1px solid #ccc;
            width: 100%;
            height: 14px;
            line-height: 14px;
            padding: 19px 24px 19px 10px;
            padding-left: 12px;
            padding-right: 10px;
            border-radius: 3px;
            -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.06);
            -moz-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.06);
            box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.06);
        }

        .field input[type=text].login_pwd,
        .field input[type=password].login_pwd {
            width: 296px;
            padding-right: 50px
        }

        .field input[type=text]::-webkit-input-placeholder,
        .field input[type=password]::-webkit-input-placeholder {
            color: #666
        }

        .field input[type=text]:-moz-placeholder,
        .field input[type=password]:-moz-placeholder {
            color: #666
        }

        .field input[type=text]::-moz-placeholder,
        .field input[type=password]::-moz-placeholder {
            color: #666
        }

        .field input[type=text]:-ms-input-placeholder,
        .field input[type=password]:-ms-input-placeholder {
            color: #666
        }

        .field .tips.tips-error a,
        .field .tips.tips-error a:hover,
        .field .tips.tips-error a:visited {
            background: inherit;
            color: #EF2617
        }

        .field .tips.tips-light a,
        .field .tips.tips-light a:hover,
        .field .tips.tips-light a:visited {
            background: inherit;
            color: #ccc
        }

        .field .btn {
            border: none;
            width: 100%;
            height: 40px;
            border-radius: 3px;
            background-color: #00ae1c;
            color: white;
            cursor: pointer;
        }

        .field .field-captcha-img img {
            margin: 8px 0 0;
            width: 150px;
            height: 24px
        }

        .field .btn.btn-ark {
            background-color: #333;
        }

        .agreement-btns .btn-ark {
            background-color: #825d5b
        }

        section {
            width: 350px;
            /* margin: 0px 10px 10px 0px; */
            border: 1px solid #dedede;
            padding: 30px;
            border-radius: 4px;
            margin-top: 40px;
        }

        .leftbox,
        .rightbox {
            background-color: #6c777714;
            border: 1px solid #dedede;
        }

        .banner {
            min-width: 750px;
            width: 80%;
            margin: auto;
        }

        .box {
        }

        .margin-100 {
            margin-top: 100px;
        }

        .field-100 {
            height: 165px;
            margin-top: 30px;
            background-color: #ecebe5;
            overflow: hidden;
            border: none;
            border-radius: 4px;
            padding: 8px;
            color: #555;
        }

        #tabs-1,
        #tabs-2 {
            margin: 20px auto;
        }
    </style>
    <link rel="stylesheet" href="./css/jquery-ui-change.css">
    <script
            src="https://code.jquery.com/jquery-1.12.4.min.js"
            integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
            crossorigin="anonymous"></script>
    <script
            src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
            integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
            crossorigin="anonymous"></script>
    <script>
        $(function () {
            $("#tabs").tabs();
        });
    </script>
    <script src="https://www.fisco.com.cn/cdn/weevent/static/js/sockjs.min.js"></script>
    <script src="https://www.fisco.com.cn/cdn/weevent/static/js/stomp.umd.js"></script>
    <script src="./js/live-demo-tab-two.js"></script>
</head>

<body>
<div class="box" id="tabs">
    <div class="banner">
        <ul>
            <li><a href="#tabs-1">Publish</a></li>
            <li><a href="#tabs-2">Subscribe</a></li>
        </ul>
    </div>
    <section class="leftbox" id="tabs-1">
        <h2>Publish</h2>
        <div class="field">
            <input type="text" name="name" class="input-text" placeholder="topic" id="topic">
        </div>
        <div class="field ">
            <input class="btn btn-ark" type="button" value="Create Topic" id="connect">
        </div>
        <div class="margin-100" id="sendBox">
            <!--<div class="field ">
                <input type="text" name="name" class="input-text" placeholder="topic" id="topic">
        </div>-->
            <div class="field">
                <input type="text" name="name" class="input-text" placeholder="message" id="message">
            </div>
            <div class="field">
                <input class="btn btn-ark" type="button" value="Send" id="send">
            </div>
        </div>
    </section>
    <section class="rightbox" id="tabs-2">
        <h2>Subscribe</h2>
        <div class="field">
            <input type="text" name="name" class="input-text" placeholder="topic" value="http://localhost"
                   id="urlparam">
        </div>
        <div class="field">
            <input type="text" name="name" class="input-text" placeholder="topic" id="subscribeTopic">
        </div>

        <div class="field">
            <input class="btn btn-ark" type="button" value="Subscribe" id="subscribe">
        </div>
        <div class="field-100">
            <table id="conversation" class="table table-striped">
                <thead>
                <tr>
                    <th>Greetings</th>
                </tr>
                </thead>
                <tbody id="greetings">
                </tbody>
            </table>
        </div>
    </section>
</div>
</body>

</html>